<template>
	<view class="f-bigbox">
		<view class="searchbox">
			<!-- <view class="s-1">发现</view> -->
			<!-- 搜索框 -->
			<view class="s-ss" @tap="goSearch()">
				<image class="s-img" src="@/static/image/o.png"></image>
				<input class="s-ssk" type="text" value="什么值得买？" />
			</view>
			<image class="s-xx" src="@/static/image/xxi.png"></image>
		</view>
		<!-- 广告内容等最热话题 -->
		<view class="topic">
			<view class="topic-hot">
				<text class="topic-hot-h1">#最热话题</text>
				<text class="topic-hot-h2">如何从金融企业借到钱</text>
			</view>
			<view class="topic-hot">
				<text class="topic-hot-h1" style="color: blue;">#最新话题</text>
				<text class="topic-hot-h2">金融的价值是什么</text>
			</view>
		</view>
		<!-- huati -->

		<view class="titles">

			<view class="t-center" v-for="item in titles" :key="item.l">
				<image class="t-c-img" :src="item.img"></image>
				<text class="t-c-text">{{item.h1}}</text>
			</view>

		</view>

		<!-- 广告 -->
		<view class="advertising">
			<image class="advertising-img" src="@/static/image/jiaonang.png" mode=""></image>
			<view class="advertising-text">
				<text class="a-t-1">在家不用愁</text>
				<text class="a-t-2">20000</text>
				<text class="a-t-2-2">额度放肆花</text>
			</view>
		</view>
		<view style="background-color: #F8F7F7;width: 750rpx; height: 32rpx;"></view>
		<!-- 资讯讯息等 -->
		<template v-for="item in message">


			<view class="message" :key="item._id">
				<!-- 这是头像和昵称哪儿 -->
				<view class="message-h">
					<view>
						<image class="m-h-img" :src=item.img></image>
						<text class="m-h-text">{{item.name}}</text>
					</view>
					<view class="m-set">
						<image class="m-set" src="@/static/image/m-set.png" mode=""></image>
					</view>
				</view>
				<!-- 中间的内容 -->
				<text class="m-text-h1">{{item.h1}}</text>
				<text class="m-text-h2">{{item.h2}}</text>
				<!-- 下面的点赞等 -->
				<view class="m-buttom">
					<text class="m-b-name">{{item.title}}</text>
					<view class="m-b-like">
						<view class="comment">
							<!-- 评论 -->
							<image src="@/static/image/xxi.png" mode=""></image>
							<text>{{item.comment}}</text>
							<!-- 点赞 -->
							<image src="@/static/image/dianzhan.png" mode=""></image>
							<text>{{item.like}}</text>
						</view>
					</view>
				</view>
			</view>

		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titles: [{
					"img": "/static/image/221.png",
					"h1": "#基金到底在哪里买#"
				}, {
					"img": "/static/image/221.png",
					"h1": "#基金到底在哪里买#"
				}, {
					"img": "/static/image/221.png",
					"h1": "#基金到底在哪里买#"
				}, {
					"img": "/static/image/221.png",
					"h1": "#基金到底在哪里买#"
				}, {
					"img": "/static/image/221.png",
					"h1": "#基金到底在哪里买#"
				}, {
					"img": "/static/image/221.png",
					"h1": "#基金到底在哪里买#"
				}, {
					"img": "/static/image/221.png",
					"h1": "#基金到底在哪里买#"
				}, ],
				message: [{
						"img": "/static/image/tx01.png",
						"name": "棒棒的",
						"h1": "什么是“专业推荐”产品？",
						"h2": "投资理财，一定是要高收益吗？追求高收益，和实现 收益之间，是否隔了一层风险？",
						"title": "雨点金融",
						"comment": "123",
						"like": "9999"
					},
					{
						"img": "/static/image/tx01.png",
						"name": "棒棒的",
						"h1": "什么是“专业推荐”产品？",
						"h2": "投资理财，一定是要高收益吗？追求高收益，和实现 收益之间，是否隔了一层风险？",
						"title": "雨点金融",
						"comment": "123",
						"like": "9999"
					}
				]
			}
		},
		methods: {
			goSearch(){
				uni.navigateTo({
					url:"../../pagesD/search/search"
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #ffffff !important;
	}
</style>

<style scoped>
	.f-bigbox {
		background-color: white;
	}

	.searchbox {
		width: 670rpx;
		height: 110rpx;
		/* background-color: red; */
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.s-1 {
		width: 80rpx;
		height: 56rpx;
		font-size: 40rpx;
		font-weight: 500;
		line-height: 56rpx;
		color: #161616;
	}

	.s-ss {
		width: 480rpx;
		display: flex;
		box-sizing: border-box;
		padding: 0 40rpx;
		margin: 0 20rpx;
		background-color: #F3F3F3;
		border-radius: 50rpx;
	}

	.s-img {
		width: 40rpx;
		height: 40rpx;
		margin-top: 10rpx;
	}

	.s-ssk {
		width: 300rpx;
		height: 60rpx;
		font-size: 24rpx;
		font-weight: 300;
		color: #BBBBBB;
	}

	.s-xx {
		width: 50rpx;
		height: 44rpx;
		margin-top: 6rpx;
	}

	.topic {
		width: 670rpx;
		height: 112rpx;
		/* border: 1rpx solid; */
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.topic-hot {
		width: 324rpx;
		height: 112rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
		border-radius: 12rpx;
		padding-left: 24rpx;
		padding-top: 16rpx;
		box-sizing: border-box;
	}

	.topic-hot-h1 {
		font-weight: bold;
		/* line-height: 44rpx; */
		color: #E62D2D;
		font-size: 32rpx;
		display: block;
	}

	.topic-hot-h2 {
		font-size: 20rpx;
		font-weight: 300;
		line-height: 28rpx;
		color: #494949;
	}

	.titles {
		width: 670rpx;

		/* border: 1rpx solid; */
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.t-center {
		width: 324rpx;
		height: 48rpx;
		margin-bottom: 24rpx;
	}

	.t-c-img {
		width: 48rpx;
		height: 48rpx;
		vertical-align: middle;
	}

	.t-c-text {
		line-height: 48rpx;
		font-size: 20rpx;
		font-weight: 300;
		color: #494949;
		margin-left: 12rpx;
	}

	.advertising {
		width: 670rpx;
		height: 168rpx;
		/* border: 1rpx dashed gray; */
		margin: 0 auto;
		position: relative;
		margin-bottom: 24rpx;
	}

	.advertising-img {
		width: 670rpx;
		height: 168rpx;
	}

	.advertising-text {
		position: absolute;
		left: 250rpx;
		top: 60rpx;
	}

	.a-t-1 {
		font-size: 24rpx;
		display: block;
		font-weight: 400;
		line-height: 34rpx;
		color: #FFFFFF;
	}

	.a-t-2 {
		font-size: 40rpx;
		color: #FFFFFF;
	}

	.a-t-2-2 {
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.message {
		width: 670rpx;
		/* height: 290rpx; */
		border-bottom: 1rpx solid #E6E6E6;
		margin: 0 auto;
		margin-bottom: 20rpx;
		padding-top: 22rpx;
		box-sizing: border-box;
	}

	.message-h {
		width: 670rpx;
		height: 50rpx;
		display: flex;
		justify-content: space-between;
	}

	.m-h-img {
		width: 48rpx;
		height: 48rpx;
		background-color: #007AFF;
		vertical-align: middle;
	}

	.m-h-text {
		font-size: 20rpx;
		font-weight: 300;
		line-height: 28rpx;
		color: #494949;
		margin-left: 12rpx;
	}

	.m-set {
		width: 50rpx;
		height: 34rpx;
	}

	.m-text-h1 {
		margin-top: 22rpx;
		margin-bottom: 8rpx;
		display: block;
		height: 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 44rpx;
		color: #323232;
	}

	.m-text-h2 {
		display: block;
		width: 670rpx;
		font-size: 28rpx;
		font-weight: 300;
		line-height: 40rpx;
		color: #6C6C6C;
		margin-bottom: 26rpx;
	}

	.m-buttom {
		width: 670rpx;
		height: 40rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 18rpx;
	}

	.m-b-name {
		display: block;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 300;
		line-height: 40rpx;
		color: #007AFF;
	}

	.m-b-like {
		width: 250rpx;
		height: 40rpx;
	}

	.comment image {
		width: 23rpx;
		height: 21rpx;
		vertical-align: middle;
		margin-left: 50rpx;
	}

	.comment text {
		font-size: 20rpx;
		font-weight: 300;
		line-height: 44rpx;
		color: #8A8A8A;
		margin-left: 4rpx;
	}
</style>
